<template>
  <div>
    <div class="header">
      <Header :isEditor="true" :id="id" />
    </div>
    <div class="container">
      <LeftSide />
      <RightSide />
    </div>
    <div>
      <Center />
    </div>
  </div>
</template>

<script setup>
import { computed, provide } from 'vue';
import Header from '@/components/Common/Header.vue';
import LeftSide from './LeftSide/Index.vue';
import RightSide from './RightSide/Index.vue';
import Center from './Center/Index.vue'

// 仓库
import { useEditorStore } from '@/stores/useEditor';
const store = useEditorStore();
store.initStore(); // 先初始化一次状态，保证进入编辑器时有初始状态

// 路由
import { useRoute } from 'vue-router';
const route = useRoute();

const id = computed(() => (route.params.id ? String(route.params.id) : undefined));
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  background-color: var(--white);
  position: fixed;
  top: 0;
  z-index: 10;
}
.container {
  width: calc(100vw - 40px);
  padding: 20px;
  height: calc(100vh - 50px - 40px);
  background: url('@/assets/image/editor_background.png');
  position: fixed;
  top: 50px;
}
</style>
